<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>新增地图</title>
	<script src="../js/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
	<link rel="stylesheet" href="../css/bootstrap.min.css" />
	<link rel="stylesheet" href="../css/newCourse.css" />
	<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
	<script src="../                                                                                                                                                                             js/axios.js"></script>

	<script src="../js/jquery.min.js"></script>
	<script src="../js/popper.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>

</head>

<body>
	<style>
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}

		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}

		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}

		.divc {
			float: left;
		}
	</style>
	<!--		<p>这里是添加地图页面</p>-->
	<!-- 一级容器，与其他框架（iframe , div）同级，装填以下div -->
	<div id="app" class="container-fluid divc">


		<!--地图名称-->
		<div class="info_input">
			<div class="input_name">地图名称:</div>
			<div class="input_body">
				<input class="form-control col-5" type="text" v-model="name">
			</div>
		</div>
		<!--课程分类-->
		<div class="info_input">
			<div class="input_name">上传图片:</div>
			<div class="input_body">
				<div id="">
					<el-upload class="avatar-uploader" action="/learnmap/addImage" :show-file-list="false"
						:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
			</div>


		</div>


		<!--闯关模式-->
		<div class="info_input">
			<div class="input_name">学习路径:</div>
			<div class="input_body">
				<button class="btn btn-default btn-sm" data-toggle="modal" data-target="#addR">添加路径</button>
			</div>
		</div>
		<div class="info_input">
			<table class="table table-bordered" style="width: 70%; height: 20px;">
				<thead>
					<tr>
						<th>序号</th>
						<th>路径名名称</th>
						<th>路径描述</th>
						<th>操作</th>
					</tr>

				</thead>
				<tbody>
					<tr v-for="learnmapdetail in learnMapDetailDtos">
						<td>{{learnmapdetail.orderno}}</td>
						<td>{{learnmapdetail.name}}</td>
						<td>{{learnmapdetail.description}}</td>
						<td>
							<button v-if="learnmapdetail.orderno !=1 " @click="up(learnmapdetail.orderno)" class="btn btn-warning btn-sm">上移</button>
							<button v-if="learnmapdetail.orderno !=rsize" @click="down(learnmapdetail.orderno)" class="btn btn-warning btn-sm">下移</button>
							<button @click="del(learnmapdetail.orderno)" class="btn  btn-danger btn-sm">删除</button>
						</td>
					</tr>

				</tbody>
			</table>
		</div>
		<!--地图简介-->
		<div class="info_input input_lg">
			<div class="input_name">地图描述:</div>
			<div class="input_body">
				<textarea class="form-control col-5" rows="3"></textarea>
			</div>
		</div>
		<div class="info_input">
			<button class="btn btn-primary" style="margin-left: 85px;" @click="add">提交</button>

		</div>
		<!-- 增加路径模态框（Modal） -->
		<div class="modal fade" id="addR" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content" style="width: 900px;">
					<div class="modal-header">
						增加一条路径
					</div>
					<div class="modal-body">
						<div class="input_name"></div>
						<div class="input_body">

							路径名字:
							<input class="form-control col-5" type="text" v-model="rname">
							<button class="btn btn-default btn-sm" @click="sel()">搜索</button>
						</div>
						<template>
							<el-table :data="routes" stripe style="width: 100%">
								<el-table-column prop="name" label="路径名字" width="180">
								</el-table-column>
								<el-table-column prop="description" label="路径简介" width="440">
								</el-table-column>
								<el-table-column label="证书" prop="certificate.name">

								</el-table-column>
								<el-table-column label="操作">
									<template slot-scope="scope">

										<el-button size="mini" type="success" @click="addRoute(scope.row)">添加
										</el-button>
									</template>
								</el-table-column>
							</el-table>
							<div class="block">

								<el-pagination
										@size-change="handleSizeChange"
										@current-change="handleCurrentChange"
										:current-page="page"
										:page-sizes="[5,10,15,20]"
										:page-size="pageSize"
										layout="total, sizes, prev, pager, next, jumper"
										:total="totalNums">
								</el-pagination>
							</div>
						</template>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>

					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->

		</div>

	</div>






	<script>
		var Main = {
			data() {
				return {
					imageUrl: '',
					name: "",
					image: "",
					description: "",
					pageSize: 5,
					storage: undefined,
					token: "",
					refreshToken: "",
					routes: [],
					rtotalPage: 1,
					rname: "",
					rsize:0,
					learnMapDetailDtos:[],
					totalNums:0,
					page:1
				};
			},
			created(){
				this.getToken();
				this.findRoutes();
			},
			methods: {
				handleAvatarSuccess(res, file) {
					this.imageUrl = URL.createObjectURL(file.raw);
					if(res.code ==200){
						this.image=res.data;
					}
				},
				beforeAvatarUpload(file) {
					const isJPG = file.type === 'image/jpeg';
					const isLt2M = file.size / 1024 / 1024 < 2;
					if (!isJPG) {
						this.$message.error('上传头像图片只能是 JPG 格式!');
					}
					if (!isLt2M) {
						this.$message.error('上传头像图片大小不能超过 2MB!');
					}
					return isJPG && isLt2M;
				},
				getToken:function(){
					this.storage = window.localStorage;
					this.token = this.storage.getItem("token");
					this.refreshToken = this.storage.getItem("refreshToken");
				},
				sel:function(){
					this.findRoutes();
				},
				findRoutes: function () {
					let data = {
						"page": this.page,
						"pageSize": this.pageSize,
						"routeName":this.rname,
					}
					axios.post("/learnmap/findRoutes", data, {
						headers: {
							'Content-Type': 'application/json;charset=UTF-8',
							"token": this.token,
							"refreshToken": this.refreshToken
						}
					}).then(res => {
						if (res.data.code == 200) {
							this.routes = res.data.data.data;
							this.totalNums=res.data.data.totalNum;
						}
					})
				},
				handleCurrentChange: function (page) {
					this.page = page;
					this.findRoutes();
				},
				handleSizeChange: function (pageSize) {
					this.pageSize = pageSize;
					this.findRoutes();
				},
				add: function () {
					let data={
						"image":this.image,
						"name":this.name,
						"description":this.description,
						"learnMapDetailDtos":this.learnMapDetailDtos,
						"status":'1'
					};
					axios.post("/learnmap/addLearnMap",data,{
						headers: {
							'Content-Type': 'application/json;charset=UTF-8',
							"token": this.token,
							"refreshToken": this.refreshToken
						}
					}).then(res=>{
						if(res.data.code == 200){
							this.$message({
								message: '成功添加了新的学习地图',
								type: 'success'
							});
						}else if(res.data.code == 233){
							this.$message({
								message: '该学习地图名字已被使用，请更换',
								type: 'warning'
							});
						}else if(res.data.code ==257){
							this.$message({
								message: '此种路径组合已被使用过，请更换',
								type: 'warning'
							});
						}else if(res.data.code ==433){
							this.$message({
								message: '系统维护中',
								type: 'error'
							});
						}
					})
				},
				addRoute:function(route){
					let orderno =this.rsize+1;
					let learnmapdetail={
						"orderno":orderno,
						"name":route.name,
						"routeid":route.routeid,
						"description":route.description
					};
					this.learnMapDetailDtos.push(learnmapdetail);
					this.rsize=this.rsize+1;
				},
				down: function (index) {
					let cindex = index - 1;
					let corderno = this.learnMapDetailDtos[cindex].orderno;
					this.learnMapDetailDtos[cindex].orderno = this.learnMapDetailDtos[index].orderno;
					this.learnMapDetailDtos[index].orderno = corderno;
					let arr = this.learnMapDetailDtos;
					[arr[cindex], arr[index]] = [arr[index], arr[cindex]];
					this.learnMapDetailDtos = arr;
				},
				up: function (index) {
					let uindex = index - 2;
					let cindex = index - 1;
					let corderno = this.learnMapDetailDtos[cindex].orderno;
					this.learnMapDetailDtos[cindex].orderno = this.learnMapDetailDtos[uindex].orderno;
					this.learnMapDetailDtos[uindex].orderno = corderno;
					let arr = this.learnMapDetailDtos;
					[arr[uindex], arr[cindex]] = [arr[cindex], arr[uindex]];
					this.learnMapDetailDtos = arr;
				},
				del: function (index) {
					let that = this;
					let cindex = index - 1;
					for (i = index; i < this.rsize; i++) {
						let orderno = this.learnMapDetailDtos[i].orderno;
						this.learnMapDetailDtos[i].orderno = orderno - 1;
					}
					this.learnMapDetailDtos.splice(cindex, 1);
					this.rsize = this.rsize - 1;
				}
			}
		}
		var Ctor = Vue.extend(Main)
		new Ctor().$mount('#app')
	</script>
</body>

</html>